﻿<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSignStoreWithOut } from '@/store/modules/sign'
import { useAppStoreWithOut } from '@/store/modules/app'
import { LoginTemplate01, LoginTemplate02, LoginTemplate03, LoginTemplate04  } from './components/LoginTemplate'
import { LoginForm, LoginForm2, LoginForm3, LoginForm4, MobileForm, QrCodeForm, RegisterForm, ResetPasswordForm, SSOLoginForm } from './components/LoginForm'
import { ChangeTemplate } from './components/ChangeTemplate'
import { ChangeIllustrationsType } from './components/Illustrations'
/**
 * 普通登录
 */
const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
// const { t } = useI18n() // 国际化
const signStore = useSignStoreWithOut()
const { activeLoginTemplate } = storeToRefs(signStore)

onMounted(() => {
  signStore.getLoginTemplateCache()
})
</script>

<template>
  <div class="login-page">
    <div class="header">
      <div class="left">
        <Logo />
      </div>
      <div class="right">
        <!-- 切换登录模板4的插画类型 -->
        <ChangeIllustrationsType v-if="activeLoginTemplate === '4'" />
        <!-- 切换登录模板 -->
        <ChangeTemplate />
        <!-- 国际化 -->
        <LocaleDropdown v-if="systemConfig.isGlobalizationEnable" />
        <!-- 明暗皮肤切换 -->
        <ThemeSwitch />
      </div>
    </div>
    <el-scrollbar>
      <LoginTemplate01 v-if="activeLoginTemplate === '1'">
        <!-- 账号登录 -->
        <LoginForm2 class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 找回密码 -->
        <ResetPasswordForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 注册 -->
        <RegisterForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- sso单点登录 -->
        <SSOLoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
      </LoginTemplate01>
      <LoginTemplate02 v-else-if="activeLoginTemplate === '2'">
        <!-- 账号登录 -->
        <LoginForm3 class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- sso单点登录 -->
        <SSOLoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
      </LoginTemplate02>
      <LoginTemplate03 v-else-if="activeLoginTemplate === '3'">
        <!-- 账号登录 -->
        <LoginForm4 class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 找回密码 -->
        <ResetPasswordForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 注册 -->
        <RegisterForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- sso单点登录 -->
        <SSOLoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
      </LoginTemplate03>
      <LoginTemplate04 v-else-if="activeLoginTemplate === '4'">
        <!-- 账号登录 -->
        <LoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 找回密码 -->
        <ResetPasswordForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 手机登录 -->
        <MobileForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 二维码登录 -->
        <QrCodeForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- 注册 -->
        <RegisterForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
        <!-- sso单点登录 -->
        <SSOLoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
      </LoginTemplate04>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--el-space);

    .left {
      flex: 1;
    }

    .right {

      :deep(.#{$namespace}-globalization) {
        position: relative;
        display: flex;
        height: 32px;
        padding: 0 10px;
        color: var(--el-color-primary);
        cursor: pointer;
        border: 1px solid var(--el-color-primary);
        border-radius: 4px;
        align-items: center;
        justify-content: space-around;
      }

      :deep(.#{$namespace}-skin) {
        margin-left: 12px;
      }
    }
  }
}
</style>
<style lang="scss">
.login-template {

  .el-dropdown-menu__item {
    &.is-active {
      color: var(--el-color-primary);
    }
  }
}
</style>
